<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结算</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/card.css">
</head>

<body>
    <!-- 导航条开始 -->
    <nav class="navbar navbar-expand-lg bg-light fixed-top p-3 shadow">
        <div class="container">
            <!-- navbar -->
            <a href="#" class="navbar-brand">
                <img src="images/logo.png" width="70px" class="me-1">
            </a>
            <!-- 折叠按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- 导航菜单 -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active text-warning" href="#">首页</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle text-warning" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            产品
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item text-warning" href="#">香蕉</a></li>
                            <li><a class="dropdown-item text-warning" href="#">葡萄</a></li>
                            <li><a class="dropdown-item text-warning" href="#">橘子</a></li>
                            <li><a class="dropdown-item text-warning" href="#">覆盆子</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  text-warning" href="#">关于我们</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link text-warning" href="#">联系我们</a>
                    </li>
                </ul>
            </div>
            <!-- 图标 -->
            <div class="icon">
                <a href="login.html" class="text-decoration-none text-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                        class="bi bi-person-square m-2" viewBox="0 0 16 16">
                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
                        <path
                            d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1v-1c0-1-1-4-6-4s-6 3-6 4v1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z" />
                    </svg>
                </a>

                <a href="card.html" class="text-decoration-none text-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                        class="bi bi-shop m-2" viewBox="0 0 16 16">
                        <path
                            d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.371 2.371 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976l2.61-3.045zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0M1.5 8.5A.5.5 0 0 1 2 9v6h1v-5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v5h6V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5M4 15h3v-5H4zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm3 0h-2v3h2z" />
                    </svg>
                </a>
                <a href="index.html" class="text-decoration-none text-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                        class="bi bi-cart3" viewBox="0 0 16 16">
                        <path
                            d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
                    </svg>
                </a>


            </div>
        </div>
    </nav>
    <!-- 导航条结束 -->


    <div class="py-5"></div>

    <!-- card字体 -->

    <div class="container text-center fw-bold">
        <span style="font-size:150px">card</span>
    </div>

    <!-- 搜索框 -->
    <div class="container my-5">
        <div class="input-group mb-3">
            <button class="btn btn-warning">搜索购物车内容</button>
            <input type="text" class="form-control border-warning">
            <button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="top"
                data-bs-original-title="点击可输入更多内容">...

                <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#m2">搜索更多</button>
                <!-- 长文档滚动模态框 -->
                <div class="modal fade" tabindex="-1" id="m2" data-bs-backdrop="static">
                    <!-- modal-dialog-centered"：对话框垂直居中 -->
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">查询</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <input type="text">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-warning">保存</button>
                            </div>
                        </div>
                    </div>
                </div>

            </button>

        </div>

    </div>





    <!-- 购物车开始 -->
    <div class="cart-area section-padding m-5">
        <div class="container">
            <div class="form">
                <div class="cart-wrapper">
                    <div class="row">
                        <div class="col-12">
                            <form action="cart" class="text-center bg-white">
                                <!-- table-responsive使表格在小屏幕设备上自适应 -->
                                <table class="table-responsive cart-wrap">
                                    <thead class="bg-white text-dark">
                                        <tr>
                                            <th class="images images-b">产品</th>
                                            <th class="product-2">产品介绍</th>
                                            <th class="pr">数量</th>
                                            <th class="ptice">单价</th>
                                            <th class="stock">小计</th>
                                            <th class="remove remove-b">删除</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="images">
                                                <img src="images/fruite-item-1.jpg" alt="" width="240px">
                                            </td>
                                            <td class="product">
                                                <ul>
                                                    <li class="first-cart">橙子</li>
                                                    <li> 维生素含量：90%</li>
                                                    <li> 销量：99+</li>
                                                </ul>
                                            </td>
                                            <td class="stock">
                                                <ul>
                                                    <li>
                                                        <input type="button" name="minus" value="-" class="text-center">
                                                        <input type="text" name="amount" class="text-center" value="1">
                                                        <input type="button" name="plus" value="+" class="text-center">
                                                    </li>

                                                </ul>
                                            </td>
                                            <td class="price">
                                                <ul>
                                                    <li id="price">¥159.90</li>
                                                </ul>
                                            </td>
                                            <td class="stock">
                                                <ul>
                                                    <li id="price0">¥159.90</li>
                                                </ul>

                                            </td>
                                            <td class="action">
                                                <ul class="d-flex justify-content-center ">
                                                    <li class="w-btn">
                                                        <a data-bs-html="true" title="" href="#"
                                                            class="bg-dark text-white d-block rounded-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor" class="bi bi-trash"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
                                                                <path
                                                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
                                                            </svg>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="images">
                                                <img src="images/fruite-item-2.jpg" alt="" width="240px">
                                            </td>
                                            <td class="product">
                                                <ul>
                                                    <li class="first-cart">覆盆子</li>
                                                    <li>维生素含量：80%</li>
                                                    <li>销量：99+</li>
                                                </ul>
                                            </td>
                                            <td class="stock">
                                                <ul>
                                                    <li>
                                                        <input type="button" name="minus" value="-" class="text-center">
                                                        <input type="text" name="amount" class="text-center" value="1">
                                                        <input type="button" name="plus" value="+" class="text-center">
                                                    </li>

                                                </ul>
                                            </td>
                                            <td class="price">
                                                <ul>
                                                    <li id="price">¥159.90</li>
                                                </ul>
                                            </td>
                                            <td class="stock">
                                                <ul>
                                                    <li id="price0">¥159.90</li>
                                                </ul>

                                            </td>
                                            <td class="action">
                                                <ul class="d-flex justify-content-center ">
                                                    <li class="w-btn">
                                                        <a data-bs-html="true" title="" href="#"
                                                            class="bg-dark text-white d-block rounded-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor" class="bi bi-trash"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
                                                                <path
                                                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
                                                            </svg>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="images"><img src="images/fruite-item-3.jpg" width="240px" alt="">
                                            </td>
                                            <td class="product">
                                                <ul>
                                                    <li class="first-cart">香蕉</li>
                                                    <li>维生素含量：80%</li>
                                                    <li>销量：99+</li>
                                                </ul>
                                            </td>
                                            <td class="stock">
                                                <ul>
                                                    <li>
                                                        <input type="button" name="minus" value="-" class="text-center">
                                                        <input type="text" name="amount" class="text-center" value="1">
                                                        <input type="button" name="plus" value="+" class="text-center">
                                                    </li>

                                                </ul>
                                            </td>
                                            <td class="price">
                                                <ul>
                                                    <li id="price">¥159.90</li>
                                                </ul>
                                            </td>
                                            <td class="stock">
                                                <ul>
                                                    <li id="price0">¥159.90</li>
                                                </ul>

                                            </td>
                                            <td class="action">
                                                <ul class="d-flex justify-content-center ">
                                                    <li class="w-btn">
                                                        <a data-bs-html="true" title="" href="#"
                                                            class="bg-dark text-white d-block rounded-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor" class="bi bi-trash"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
                                                                <path
                                                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
                                                            </svg>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="images"><img src="images/fruite-item-4.jpg" width="240px" alt="">
                                            </td>
                                            <td class="product">
                                                <ul>
                                                    <li class="first-cart">杏</li>
                                                    <li>维生素含量：75%</li>
                                                    <li>销量：99+</li>
                                                </ul>
                                            </td>
                                            <td class="stock">
                                                <ul>
                                                    <li>
                                                        <input type="button" name="minus" value="-" class="text-center">
                                                        <input type="text" name="amount" class="text-center" value="1">
                                                        <input type="button" name="plus" value="+" class="text-center">
                                                    </li>

                                                </ul>
                                            </td>
                                            <td class="price">
                                                <ul>
                                                    <li id="price">$159.90</li>
                                                </ul>
                                            </td>
                                            <td class="stock">
                                                <ul>
                                                    <li id="price0">$159.90</li>
                                                </ul>

                                            </td>
                                            <td class="action">
                                                <ul class="d-flex justify-content-center">
                                                    <li class="w-btn">
                                                        <a data-bs-html="true" title="" href="#"
                                                            class="bg-dark text-white d-block rounded-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor" class="bi bi-trash"
                                                                viewBox="0 0 16 16">
                                                                <path
                                                                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
                                                                <path
                                                                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
                                                            </svg>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </form>
                            <div class="submit-btn-area">
                                <ul class="d-flex justify-content-end">
                                    <li>
                                        <a class="theme-btn" href="shop.html">
                                        </a>
                                    </li>
                                    <li>
                                        <button type="submit" class="border-0 bg-dark text-white"> Update Cart</button>
                                    </li>
                                </ul>
                            </div>
                            <div class="cart-product-list">
                                <ul class="py-4">
                                    <li class="m-3 d-flex justify-content-between fw-bold fs-5 text-dark">
                                        小计<span>(05)</span></li>
                                    <li class="m-3 d-flex justify-content-between fw-bold fs-5 text-dark">
                                        优惠<span>¥100</span></li>
                                    <hr>
                                    <li class="m-3 cart-b d-flex  justify-content-between fw-bold fs-5 text-danger">
                                        总价<span>¥500</span></li>
                                </ul>
                            </div>
                            <div class="submit-btn-area">
                                <ul class="d-flex  justify-content-end p-4">
                                    <li>
                                        <button type="submit" class="border-0 bg-dark text-white">结算</button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart-area end -->

    <!-- 留言板 -->
    <div class="container">
        <h1 class="text-center my-4">留言板</h1>
        <form id="messageForm">
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username" required>
            </div>
            <div class="mb-3">
                <label for="message" class="form-label">留言内容</label>
                <textarea class="form-control" id="message" rows="3" required></textarea>
            </div>
            <button type="submit" class="btn btn-warning">提交留言</button>
        </form>
        <ul id="messageList" class="list-group mt-4 m-2"></ul>
    </div>


    <div class="container text-center fw-bold">
        <span style="font-size:100px">contact us</span>
    </div>

    <div class="container m-5">
        <div class="block"> 
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-8 pb-4">
                    <div class="row mb-5">
                        <div class="col-lg-4">
                            <div class="no-shadow align-items-center link horizontal d-flex active" data-aos="fade-left"
                                data-aos-delay="0">
                                <div class="rounded-2 mb-2 bg-warning text-white p-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                                        <path
                                            d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z">
                                        </path>
                                    </svg>
                                </div> <!-- /.icon -->
                                <div class="service-contents p-2">
                                    <p>毓秀路488号</p>
                                </div> <!-- /.service-contents-->
                            </div> <!-- /.service -->
                        </div>

                        <div class="col-lg-4">
                            <div class="service no-shadow align-items-center link horizontal d-flex active"
                                data-aos="fade-left" data-aos-delay="0">
                                <div class="rounded-2 mb-2 bg-warning text-white p-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-envelope-fill" viewBox="0 0 16 16">
                                        <path
                                            d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z">
                                        </path>
                                    </svg>
                                </div> <!-- /.icon -->
                                <div class="service-contents">
                                    <p>123456789@qq.com</p>
                                </div> <!-- /.service-contents-->
                            </div> <!-- /.service -->
                        </div>

                        <div class="col-lg-4">
                            <div class="service no-shadow align-items-center link horizontal d-flex active"
                                data-aos="fade-left" data-aos-delay="0">
                                <div class="rounded-2 mb-2 bg-warning text-white p-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-telephone-fill" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
                                        </path>
                                    </svg>
                                </div> <!-- /.icon -->
                                <div class="service-contents">
                                    <p>+1 294 3925 3939</p>
                                </div> <!-- /.service-contents-->
                            </div> <!-- /.service -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

  
        <form action="page1.html" method="post" class="needs-validation m-5" novalidate>
            <div class="row gy-3">

                <div class="col-6 position-relative">
                    <label for="text" class="col-form-label">姓名</label>
                    <div>
                        <input type="text" class="form-control" id="text" required>
                        <div class="valid-tooltip">
                            ok!
                        </div>
                        <div class="invalid-tooltip">
                            请填写正确姓名格式
                        </div>
                    </div>
                </div>

                <div class="col-6 position-relative">
                    <label for="email11" class="col-form-label">Email</label>
                    <div>
                        <input type="email" class="form-control" id="email11" required>
                        <div class="valid-tooltip">
                            ok!
                        </div>
                        <div class="invalid-tooltip">
                            请填写正确的email格式
                        </div>
                    </div>
                </div>
              
                <div class="col-12 position-relative">
                    <label for="text" class="col-form-label">内容</label>
                    <div>
                        <textarea name="" id="textarea" cols="30" rows="10" class="form-control"></textarea>
                        <div class="valid-tooltip">
                            ok!
                        </div>
                        <div class="invalid-tooltip">
                            内容不能为空
                        </div>
                    </div>
                </div>

                <div class="col-12 position-relative">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="check1" required>
                        <label for="check1" class="form-check-label">请确定</label>
                        <div class="valid-tooltip">
                            ok!
                        </div>
                        <div class="invalid-tooltip">
                            请勾选
                        </div>
                    </div>
                </div>
                <div class="col-12 text-center">
                    <button type="submit" class="btn btn-warning w-50" id="submit">发送</button>
                </div>
            </div>
        </form>
    </div>


    <!-- footer -->
    <div class="footer p-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4 grid">
                    <h3 class="text-white">关于我们</h3>
                    <p class="fs-50">新鲜和健康的食物选择对于拥有一个健康的身体是至关重要的。新鲜的水果和蔬菜是必不可少的。
                        我们的水果和蔬菜是从该地区最新鲜的农场采摘的，为您提供最营养和美味的选择</p>
                </div>
                <div class="col-md-4 grid">
                    <h3 class="text-white">导航</h3>
                    <ul>
                        <li class="text"><a href="about.html">首页</a></li>
                        <li class="text"><a href="typography.html">产品</a></li>
                        <li class="text"><a href="icons.html">关于我们</a></li>
                        <li class="text"><a href="gallery.html">联系我们</a></li>

                    </ul>
                </div>
                <div class="col-md-4 grid">
                    <h3 class="text-white">联系我们</h3>
                    <form action="#" method="post">
                        <input type="email" id="mc4wp_email" class="bg-white shadow mb-4 w-100 p-2 fs-25" name="EMAIL"
                            placeholder="Enter your email here" required="">
                        <input type="submit" class="text-dark fs-25 border-1 text-decoration-none p-2"
                            value="Subscribe">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <!-- copyright -->
    <div class="copyright bg-dark p-2 text-center">
        <div class="container">
            <p class="fs-25 m-0">© hfjsjflsjlfjksdjf . fdsfdsfsdfs| fsdfsdf <a href="#" class="text-decoration-none">
                    fsdfsd</a> </p>
        </div>
    </div>
    <!-- copyright -->


    <!-- 返回顶部按钮 -->
    <a href="#" class="btn btn-warning border-3 border-secondary  position-fixed rounded-circle back-to-top">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-airplane-fill"
            viewBox="0 0 16 16">
            <path
                d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849" />
        </svg>
    </a>

    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/card.js"></script>
<script>
     
</script>
</body>

</html>